<template>
  <div class="more-container">
    <el-tabs v-model="activeName" @tab-click="handleClick" class="tabcontent">
      <el-tab-pane label="认证信息" name="first">
        <div class="schooladmincontent">
          <!-- 提示警告 -->
          <warning v-if="state != 2">
            <p>
              温馨提示：请确保认证信息真实有效，不得冒用他人身份或驾校资质，一经发现将承担所有法律责任，并永久撤销该注册人平台使用资格。
            </p>
          </warning>

          <err v-if="state == 2">
            <p>认证结果：认证失败，失败原因：{{ backInfo }}</p>
          </err>

          <!-- 进度信息 -->
          <div class="schedule">
            <step :stepArray="steparr" :value="status"></step>
          </div>
          <!-- 入驻信息 -->
          <div class="enterinfo">
            <enterinfo @accomplish="accomplish"></enterinfo>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="基础信息" name="second">
        <!-- 提示框 -->
        <warn
          class="warn"
          v-if="baseInfo.rate == '100%'"
          :borderColor="'#91d5ff'"
          :content="`您好！您的驾校信息完成度：${baseInfo.rate}。`"
          :bgc="'#e6f7ff'"
          :iconcolo="'#1890ff'"
        ></warn>
        <warn
          class="warn"
          v-else
          :borderColor="'#91d5ff'"
          :content="`您好！您的驾校信息完成度：${baseInfo.rate}。请及时完善班型信息、训练场信息、考场信息。`"
          :bgc="'#e6f7ff'"
          :iconcolo="'#1890ff'"
        ></warn>
        <!-- 内容区域 -->
        <div class="content-main" v-if="true">
          <div class="drivingschoolimg">
            <img :src="baseInfo.head_img" alt="" />
          </div>
          <div class="drivingcontent" v-if="isData">
            <div id="drivingcontent">
              <!-- 驾校名字 -->
              <div class="d-name">
                <h3>{{ baseInfo.short_title }}</h3>
              </div>
              <!-- 排名 -->
              <div class="d-pm">
                <span class="pmclass">{{ baseInfo.sort }}</span>
                <span class="tagclass">学员{{ baseInfo.student }}人</span>
                <span class="tagclass">评分{{ baseInfo.score }}分</span>
              </div>
              <!-- 列表区域 -->
              <div class="d-list">
                <ul>
                  <li>
                    <div class="d-list-title">驾校地址：</div>
                    <div class="d-list-content">{{ baseInfo.address }}</div>
                  </li>
                  <li>
                    <div class="d-list-title">基础设施：</div>
                    <div class="d-list-content">
                      <ul class="baseIcon">
                        <li
                          v-for="(item, index) in facilityOption"
                          :key="index"
                        >
                          <img
                            :src="item.alias"
                            :class="item.ison ? 'on' : ''"
                          />
                          <span>{{ item.title }}</span>
                        </li>
                      </ul>
                    </div>
                  </li>
                  <li v-if="false">
                    <div class="d-list-title">驾校标签：</div>
                    <div class="d-list-content">
                      <ul class="d-icon">
                        <li
                          v-for="(item, index) in 7"
                          :key="index"
                          @click="cTag"
                        >
                          <span>大</span>
                          <span>规模大</span>
                        </li>
                      </ul>
                    </div>
                  </li>

                  <li>
                    <div class="d-list-title">考试资质：</div>
                    <div class="d-list-content" v-if="baseInfo.schoolBase">
                      {{ baseInfo.schoolBase.qualifications.title.join('、') }}
                    </div>
                    <div class="d-list-content" v-else>-</div>
                  </li>
                  <li>
                    <div class="d-list-title">附加服务：</div>
                    <div class="d-list-content" v-if="baseInfo.schoolBase">
                      {{ baseInfo.schoolBase.service.title.join('、') }}
                    </div>
                    <div class="d-list-content" v-else>-</div>
                  </li>
                  <li>
                    <div class="d-list-title">班型信息：</div>
                    <div class="d-list-content">
                      已设置{{ baseInfo.package }}个班型
                      <el-link
                        type="primary"
                        :underline="false"
                        style="margin-left: 5px"
                        @click="classtype"
                      >
                        前往设置
                      </el-link>
                    </div>
                  </li>
                  <li>
                    <div class="d-list-title">场地信息：</div>
                    <div class="d-list-content">
                      已设置{{ baseInfo.enrollPoint }}个
                      <el-link type="primary" @click="gobmd">经营机构</el-link>
                      、{{ baseInfo.trainPlace }}个
                      <el-link type="primary" @click="goxlc">训练场</el-link>
                      、{{ baseInfo.examPlace }}个
                      <el-link type="primary" @click="gokc">考场</el-link>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="editbtn">
            <el-button
              plain
              v-if="checkPermission(['schoolBaseinfoEdit'])"
              @click="baseinfoedit"
            >
              编辑
            </el-button>
          </div>
          <editform
            v-if="isshowEdit"
            :isshowDialog="isshowEdit"
            @closeDialog="closeDialog"
            @confirmbtn="confirmbtn"
          ></editform>
        </div>
      </el-tab-pane>
      <el-tab-pane label="驾校简介" name="introduction">
        <div class="innerloding">
          <introduction v-if="activeName == 'introduction'"></introduction>
        </div>
      </el-tab-pane>
      <el-tab-pane label="驾校相册" name="imgBox">
        <imgBox v-if="activeName == 'imgBox'"></imgBox>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
//提示组件
import warn from '@/components/warn/warn'
//编辑弹窗
import editform from './component/editform'

import { getCOption } from '@/api/common'
import { getSessionStorage } from '@/utils/accessToken'
// 提示组件
import warning from './component/warinig'
import err from './component/err'
// 进度组件
import step from './component/step'
//入驻表单组件
import enterinfo from './component/enterinfo'
import imgBox from './component/imgBox'
import introduction from './component/introduction'
//api
import { getSchool, getBaseInfo } from '@/api/school'
//按钮权限验证
import checkPermission from '@/utils/permission'
export default {
  data() {
    return {
      //进度组件
      steparr: ['入驻信息', '认证信息', '平台审核', '认证成功'],
      //认证信息
      datas: {},
      //认证状态 -1 认证信息 0平台审核 1 认证成功 2 不同意
      status: 0,
      //返回的错误信息
      backInfo: '',
      //认证状态
      state: 0,
      //数据是否加载成功
      isData: false,
      //tabs 选项
      activeName: 'first',
      //是否需要显示编辑弹窗
      isshowEdit: false,
      //基础信息
      baseInfo: {},
      //基础设施图标
      facilityOption: [],
    }
  },
  components: {
    warning,
    step,
    enterinfo,
    err,
    warn,
    editform,
    imgBox,
    introduction,
  },
  methods: {
    checkPermission,
    //切换tabs
    handleClick(tab, event) {
      this.isData = false
      this.activeName = tab.name
      if (tab.index == '0') {
        //驾校信息
        this.getSchoolData()
      } else if (tab.index == '1') {
        //接入我的
        //获取基础信息
        this.getBaseInfoData()
      }
    },
    //提交数据更新数据
    accomplish() {
      this.getSchoolData()
    },
    //获取认证信息
    async getSchoolData() {
      let data = await getSchool()
      this.datas = data.data
      let { status, back_info } = data.data

      this.status = status.value
      this.state = status.value
      if (status.value == -1) {
        this.status = 2
      } else if (status.value == 0) {
        this.status = 3
      } else if (status.value == 1) {
        this.status = 4
      } else if (status.value == 2) {
        this.status = 2
        this.backInfo = back_info
      }
    },
    //获取固定选项数据
    async getCarOption() {
      let data = await getCOption()
      if (data.code == '0000') {
        //存入sessionStorage
        window.sessionStorage.setItem('Options', JSON.stringify(data.data))
      }
    },
    confirmbtn() {
      this.isshowEdit = false
      //刷新数据
      this.getCarOption()
      //刷新数据
      this.getBaseInfoData()
      //基础设施选项
      this.facilityOption = getSessionStorage('Options')[20]
    },
    //前往设置班型
    classtype() {
      this.$router.push({
        path: '/classtype/classtype',
      })
    },
    //去训练场
    goxlc() {
      this.$router.push({
        path: '/organizationmanage/training',
      })
    },
    //去报名点
    gobmd() {
      this.$router.push({
        path: '/organizationmanage/registrationAgency',
      })
    },
    //前往设置考场
    gokc() {
      this.$router.push({
        path: '/organizationmanage/examination',
      })
    },
    //点亮标签
    clickTag() {
      this.$message({
        message: '最多选择三个标签！',
        type: 'success',
      })
    },
    cTag() {},
    //编辑
    baseinfoedit() {
      this.isshowEdit = true
    },
    //关闭弹窗
    closeDialog() {
      this.isshowEdit = false
    },
    //获取基础信息
    async getBaseInfoData() {
      let data = await getBaseInfo()
      this.baseInfo = data.data
      //    return

      if (data.data.schoolBase) {
        this.facilityOption.forEach((items, index) => {
          data.data.schoolBase.facilities.value.forEach((item, index) => {
            if (items.id == item) {
              this.$set(items, 'ison', true)
            }
          })
        })
      }
      //数据加载成功
      this.isData = true
    },
  },
  mounted() {
    //获取基础信息
    this.getBaseInfoData()
    //基础设施选项
    this.facilityOption = getSessionStorage('Options')[20]
    //当用户来到认证页面 以后就不显示弹窗了
    window.sessionStorage.setItem('isauth', 1)
    //获取详情信息
    this.getSchoolData()
  },
  watch: {},
}
</script>

<style scoped lang='scss'>
::v-deep {
  .el-tabs__nav-wrap::after {
    height: 1px;
  }

  .el-tabs__item {
    font-size: 16px;
  }

  .el-tabs__item.is-active {
    font-weight: bold;
  }
}

.tabcontent {
  margin-top: 10px;
}

.more-container {
  background-color: #fff !important;

  .schedule {
    display: flex;
    height: 80px;
    background-color: #fff;
    margin-top: 20px;
    padding: 0 32px 0 24px;
    justify-content: space-between;
    margin-top: 20px;
    align-items: center;
    border-radius: 5px;
  }

  .enterinfo {
    margin-top: 20px;
    background-color: #fff;
    border-radius: 5px;
    padding: 5px 24px 10px;
    box-sizing: border-box;
  }
}
.more-container {
  /*    height: 100% !important; */

  .warn {
    margin-bottom: 20px;
  }

  /*    padding: 10px !important;
    background-color: #f6f8f9 !important; */

  .content-main {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;

    .drivingschoolimg {
      width: 153px;
      height: 110px;
      border-radius: 5px;
      overflow: hidden;
      border: 1px solid #f5f5f5;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .drivingcontent {
      flex: 1;
      margin-left: 20px;
    }
  }
}

#drivingcontent {
  .d-name {
    h3 {
      font-size: 26px;
      padding: 0;
      margin: 0;
    }

    margin-bottom: 15px;
  }

  .d-pm {
    span {
      margin-right: 5px;
    }
  }

  .pmclass {
    background: linear-gradient(90deg, #90b6ff, #5489ff 44%, #5288ff);
    color: #fff;
    padding: 3px 6px;
    border-radius: 3px;
  }

  .d-list {
    margin-top: 30px;

    ul {
      li {
        font-size: 14px;
        display: flex;
        margin: 20px 0;
        cursor: pointer;

        .d-list-content {
          margin-left: 5px;
          display: flex;
          align-items: center;
        }
      }
    }
  }

  .baseIcon {
    display: flex;

    li {
      display: flex;
      flex-direction: column;
      margin: 0 !important;
      justify-content: center;
      align-items: center;
      margin-right: 25px !important;

      img {
        width: 25px;
        // opacity: .4;
        filter: grayscale(10);

        &.on {
          filter: grayscale(0);
        }
      }

      span {
        margin-top: 5px;
        font-size: 12px;
      }
    }
  }

  .d-icon {
    display: flex;
    align-items: center;

    li {
      display: flex;
      flex-direction: row;
      margin: 0 !important;
      justify-content: center;
      align-items: center;
      margin-right: 20px !important;
      cursor: pointer;

      span {
        &:first-child {
          background-color: #ccc;
          padding: 2px;
          border-radius: 2px;
          color: #fff;
          font-size: 13px;
        }

        &:nth-child(2) {
          font-size: 13px;
          margin-left: 5px;
        }
      }
    }
  }
}
</style>
